<template>
  <div class="search-bar-wrap">
    <div class="search-bar-left">
      <template v-for="(formItem, index) in localFormSchema" :key="index">
        <template v-if="formItem.type !== 'slot'">
          <component
            :is="getComponent(formItem.type)"
            v-if="!Array.isArray(formItem.field)"
            :attr="formItem.attr"
            :form-item="formItem"
            :fields="fields[formItem.field]"
            @search="search"
            @update:fields="updateFields(formItem.field, $event)"
          />
          <component
            :is="getComponent(formItem.type)"
            v-else
            :field1="fields[formItem.field[0]]"
            :field2="fields[formItem.field[1]]"
            :attr="formItem.attr"
            :form-item="formItem"
            @search="search"
            @update:field1="updateFields(formItem.field[0], $event)"
            @update:field2="updateFields(formItem.field[1], $event)"
          />
        </template>
        <template v-else>
          <slot :form-item="formItem" :name="formItem.slotName" class="test" />
        </template>
        <span v-if="formItem.afterFix">{{ formItem.afterFix }}</span>
      </template>
      <MoreSearch
        v-if="moreFormSchema.length > 0"
        ref="moreSearchRef"
        :fields="fields"
        :default-form="defaultForm"
        :form-schema="moreFormSchema"
        @confirm="search"
        @resetMore="resetMore"
      >
        <template v-for="item in filterMoreSlot" :key="item.slotName" #[item.slotName]>
          <slot :form-item="item" :name="item.slotName" />
        </template>
      </MoreSearch>
      <el-button
        v-if="showClear"
        class="mb4"
        size="small"
        style="height: 28px;line-height: 1;"
        text
        type="primary"
        @click="clearAll"
      >
        清空条件
      </el-button>
    </div>
    <div v-if="hasHandle" class="search-bar-right">
      <slot name="classIndex" />
      <slot name="classStudentList" />
    </div>
  </div>
</template>

<script>
import { ref, isReactive, isRef, createVNode, computed, onMounted } from 'vue'
import modules from './modules'
import MoreSearch from './moreSearch.vue'
import { deepClone } from '@/util'

export default {
  name: 'SearchBarV2',
  components: {
    ...modules,
    MoreSearch
  },
  inheritAttrs: true,
  props: {
    formSchema: {
      required: true,
      type: Array
    },
    fields: {
      type: Object
    },
    showClear: {
      type: Boolean,
      default: true
    },
    defaultForm: {
      type: Object,
      default() {
        return {}
      }
    },
    moreFormItems: {
      type: Array,
      default() {
        return []
      }
    },
    hasHandle: {
      type: Boolean,
      default: false
    },
    handlePage: {
      type: String,
      default: ''
    }
  },
  emits: ['search', 'update:fields'],
  setup(props, { emit }) {
    onMounted(() => {
      console.log('props', props)
    })
    const cacheDataMap = ref({})
    // 过滤本地显示数据
    const localFormSchema = ref(props.formSchema)
    const moreFormSchema = ref(props.moreFormItems || [])
    const moreSearchRef = ref(null)

    watch(() => props.formSchema, () => {
      localFormSchema.value = props.formSchema.filter(item => !item.hidden && !item.inMore)
      moreFormSchema.value = props.moreFormItems.length > 0 ? props.moreFormItems : props.formSchema.filter(item => !item.hidden && item.inMore)
    }, { deep: true, immediate: true })

    const filterMoreSlot = computed(() => {
      return moreFormSchema.value.filter(item => item.type === 'slot')
    })

    // 预设组件索引
    const preset = [
      'select', // 下拉选择
      'date-picker', // 日期选择器
      'auto-complete', // 自动补全
      'search-teacher', // 搜索老师
      'range-input' // 范围输入框
    ]
    // 获取组件
    const getComponent = type => {
      // 预设组件
      if (preset.includes(type)) {
        return 'search-bar-' + type
      } else if (isReactive(type) || isRef(type)) {
        // 自定义组件
        return createVNode(type)
      } else {
        // 不识别组件
        return type
      }
    }

    const changeData = data => {
      cacheDataMap.value[data.key] = data.data
    }

    const getCacheDataMap = () => {
      return cacheDataMap.value
    }

    const search = () => {
      emit('search')
    }

    const updateFields = (key, val) => {
      emit('update:fields', { ...props.fields, [key]: val })
    }

    const clearAll = () => {
      emit('update:fields', deepClone(props.defaultForm))
      emit('search')
      moreSearchRef.value && moreSearchRef.value.close()
    }

    function resetMore(data) {
      emit('update:fields', Object.assign({}, deepClone(props.fields), data))
      emit('search')
    }

    return { moreSearchRef, localFormSchema, moreFormSchema, filterMoreSlot, getComponent, updateFields, changeData, getCacheDataMap, search, clearAll, resetMore }
  }
}
</script>

<style scoped lang="scss">
.search-bar-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--color-whites);
  padding: 8px 0 8px 20px;
  // margin-bottom: 10px;
  .search-bar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .search-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-button {
      margin-top: -2px;
    }
  }
}
</style>
